import React, { Component } from 'react';
import { Row, Col, Button, Icon, Select, Radio } from 'antd';

const { Option } = Select;
export default class PageTop extends Component {
  state = {
    btnIcon: true,
  };

  handleRemindChange = (key2, val) => {
    const { dispatch, location, remindParams, dynamicParams } = this.props;
    const { tabKey } = location.query;
    if (tabKey === 'remind') {
      const params = {
        ...remindParams,
        [key2]: val,
      };
      dispatch({
        type: 'Workbench/requestRemindData',
        payload: {
          params,
        },
      });
    }
    if (tabKey === 'dynamic') {
      const params = {
        ...dynamicParams,
        [key2]: val,
      };
      dispatch({
        type: 'Workbench/requestDynamicData',
        payload: {
          params,
        },
      });
    }
  };

  element = () => {
    let slot = null;
    const { stages, todoType } = this.props;
    const activeKey = this.props.location.query.tabKey;
    const { btnIcon } = this.state;
    if (activeKey === 'remind') {
      slot = (
        <Row type="flex" align="middle" gutter={[20, 0]}>
          <Col>
            <Select
              placeholder="--分期筛选--"
              style={{ width: 135 }}
              onChange={value => this.handleRemindChange('stagesId', value * 1 === 0 ? '' : value)}
            >
              {stages.map(element => (
                <Option key={element.stagesId}>{element.stagesName}</Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Select
              placeholder="--待办类型筛选--"
              style={{ width: 135 }}
              onChange={value => this.handleRemindChange('typeId', value * 1 === 0 ? '' : value)}
            >
              {todoType.map(element => (
                <Option key={element.code}>{element.name}</Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Radio.Group
              onChange={e => this.handleRemindChange('state', e.target.value)}
              defaultValue=""
            >
              <Radio value="">全部</Radio>
              <Radio value={0}>待处理</Radio>
              <Radio value={1}>已处理</Radio>
            </Radio.Group>
          </Col>
        </Row>
      );
    }
    if (activeKey === 'dynamic') {
      slot = (
        <Row type="flex" align="middle" gutter={[20, 0]}>
          <Col>
            <Select
              placeholder="--分期筛选--"
              style={{ width: 135 }}
              onChange={value => this.handleRemindChange('stagesId', value)}
            >
              {stages.map(element => (
                <Option key={element.stagesId}>{element.stagesName}</Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Button
              onClick={() => {
                this.setState({
                  btnIcon: !btnIcon,
                });
                this.props.formState(btnIcon);
              }}
            >
              高级筛选
              <Icon type={btnIcon ? 'down' : 'up'} />
            </Button>
          </Col>
        </Row>
      );
    }
    return slot;
  };

  render() {
    return this.element();
  }
}
